<template>
  <div class="cinema-box">
    <div class="return" @click="handleReturn">
      <img
        src=""
        alt
      />
    </div>
    <div class="cinema-headers">
      <ul class="cinema-headers-ul">
        <li class="cinema-headers-ul-li city yahei-font">
          广州
          <i
            style="font-size: 12px"
            class="iconfont icon-duduyinleappicon1401"
          ></i>
        </li>
        <li class="cinema-headers-ul-li cinemaBT yahei-font">
          {{ filminfo.title }}
        </li>
        <li class="cinema-headers-ul-li cinemaSearch yahei-font"></li>
      </ul>
    </div>
    <div class="cinemas-scroll" :style="{ height: sreenheight }">
      <ul class="cinemas-ul">
        <li
          class="cinemas-ul-li"
          v-for="data in this.cinemas"
          :key="data.cinemaId"
          @click="handleTicket(data, data.cinemaId)"
        >
          <p class="cinemas-name yahei-font">{{ data.name }}</p>
          <p class="cinemas-address font-grow yahei-font">{{ data.address }}</p>
          <span class="cinemas-lowPrice yahei-font"
            >¥ {{ data.lowPrice | lowpriceFilter }} 起</span
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      cinemas: [],
      sreenheight: '0px',
      id: '',
      filminfo: []
    }
  },
  mounted () {
    props: ['filminfo']
    console.log('打印Detail传送的参数', this.$route.params)
    this.filminfo = this.$store.state.filminfo
    this.sreenheight = document.documentElement.clientHeight - 100 + 'px'
    this.$store.dispatch('getCinemaListAction')
    this.$nextTick(() => {})
    var cinemaIds = this.$store.state.cinedata.toString()
    // console.log(this.props)
    axios({
      method: 'post',
      url: 'https://m.maizuo.com/gateway?k=689282',
      data: {
        cityId: 440100,
        cinemaIds: cinemaIds
      },
      headers: {
        'X-Client-Info':
          '{"a":"3000","ch":"1002","v":"5.0.4","e":"1601368144305732951998465","bc":"440100"}',
        'X-Host': 'mall.film-ticket.cinema.batch-cinema'
      }
    }).then((res) => {
      console.log(res.data)
      this.cinemas = res.data.data.cinemas
    })
  },
  methods: {
    handleTicket (data, id) {
      this.$store.state.cinemainfo = data
      this.$store.state.filminfo = this.filminfo
      this.$router.push({
        name: 'ticketpage',
        params: { cid: id, filminfo: this.filminfo, cinemainfo: data }
      })
    },
    handleReturn () {
      this.$router.push(`/detail/${this.filminfo.filmId}`)
      // this.$router.push('nowplaying')
    }
  }
}
</script>

<style lang="scss" scoped>
.return {
  position: absolute;
  width: 10px;
  height: 10px;
  img {
    top: 10px;
    width: 15px;
    height:20px;
    position: relative;
  }
}
.detail-img {
  width: 100%;
  float: fixed;
}
.cinema-box {
  background: #fff;
}
.cinemas-ul {
  .cinemas-ul-li {
    height: 60px;
    width: 100%;
    padding: 0 20px;
    border-bottom: 1px solid #eee;
    position: relative;
    line-height: 20px;
  }
}
.cinemas-scroll {
  overflow: auto;
  position: relative;
}
.cinema-headers,
.cinema-headers-selects {
  height: 40px;
  // display: flex;
  width: 100%;

  .cinema-headers-ul,
  .cinema-headers-selects-ul {
    width: 100%;
    display: flex;
    .cinema-headers-ul-li,
    .cinema-headers-selects-ul-li {
      flex: 1;
      height: 100%;
      list-style: none;
      line-height: 40px;
      box-sizing: border-box;
    }
  }
}
.city {
  text-align: left;
}
.cinemaBT,
.cinema-headers-selects-ul-li {
  text-align: center;
}
.cinemaSearch {
  text-align: right;
}
.city,
.cinemaSearch {
  padding: 0 20px;
}
.cinemas-address {
  font-size: 12px;
  width: 230px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: 18px;
}
.cinemas-name {
  font-size: 14px;
}
.cinemas-lowPrice {
  position: absolute;
  right: 70px;
  top: 5px;
  font-size: 14px;
  color: #ffa502;
}
</style>
